<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-input placeholder="请输入歌手名" v-model="selectSinger" clearable class="handle-input"></el-input>
        <!--        添加歌手按钮-->
        <el-button type="primary"  @click="AdddialogVisible = true">添加歌手</el-button>
        <el-button type="danger"  @click="deleteSingerAll">批量删除</el-button>
      </div>
    </div>
<!--    歌手信息表单区域-->
    <el-table :data="allSingerTableDate" style="width: 100% " border height="600px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column label="歌手图片" width="110" align="center">
        <template slot-scope="scope">
          <div class="singer-img">
            <img :src="getImgUrl(scope.row.pic)"  style="width: 100%"  />
          </div>
          <el-upload :action="uploadUrl(scope.row.id)" :before-upload="beforeSingerAvatorUpload" :on-success="handleSingerAvatorSuccess" >
            <el-button type="primary" size="mini" >更新图片</el-button>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="歌手" width="120" align="center"></el-table-column>
      <el-table-column prop="sex" label="性别" width="50" align="center">
        <template slot-scope="scope">
           {{ChangeSex(scope.row.sex)}}
        </template>
      </el-table-column>
      <el-table-column prop="birth" label="生日" width="120" align="center">
        <template slot-scope="scope">
          {{attachBirth(scope.row.birth)}}
        </template>
      </el-table-column>
      <el-table-column prop="location" label="地区" width="100" align="center"></el-table-column>
      <el-table-column label="简介" >
        <template slot-scope="scope">
          <p style="height: 100px;overflow: scroll">
            {{scope.row.introduction}}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="歌曲管理"  width="110" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="editSong(scope.row.id,scope.row.name)">歌曲管理</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="handleEdit(scope.row)" >编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

<!--    分页功能区域-->
    <div class="PageNation">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[5, 10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="SingerTableDate.length">
      </el-pagination>
    </div>

<!--    添加歌手对话框-->
    <el-dialog title="添加歌手" :visible.sync="AdddialogVisible" width="420px" center >
<!--      表单内容区域-->
      <el-form :model="AddSingerfRuleForm" :rules="AddSingerRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="歌手名" prop="name">
          <el-input v-model="AddSingerfRuleForm.name"  placeholder="歌手名"></el-input>
        </el-form-item>
        <el-form-item label="性别" >
          <el-radio-group v-model="AddSingerfRuleForm.sex" >
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="birth">
         <el-date-picker v-model="AddSingerfRuleForm.birth" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="地区" prop="location">
          <el-input v-model="AddSingerfRuleForm.location"  placeholder="地区"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="introduction">
          <el-input v-model="AddSingerfRuleForm.introduction"  placeholder="简介" type="textarea"></el-input>
        </el-form-item>
      </el-form>
<!--      按钮区域-->
      <span slot="footer">
        <el-button @click="AdddialogVisible = false" >取 消</el-button>
        <el-button type="primary" @click="addSinger" >确 定</el-button>
      </span>
    </el-dialog>

<!--    修改歌手对话框-->
    <el-dialog title="修改歌手信息" :visible.sync="EditdialogVisible" width="420px" center >
      <!--      表单内容区域-->
      <el-form :model="EditSingerRuleForm" :rules="EditingerRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="歌手名" prop="name">
          <el-input v-model="EditSingerRuleForm.name"  placeholder="歌手名"></el-input>
        </el-form-item>
        <el-form-item label="性别" >
          <el-radio-group v-model="EditSingerRuleForm.sex" >
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" >
          <el-date-picker v-model="EditSingerRuleForm.birth" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="地区" prop="location">
          <el-input v-model="EditSingerRuleForm.location"  placeholder="地区"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="introduction">
          <el-input v-model="EditSingerRuleForm.introduction"  placeholder="简介" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <!--      按钮区域-->
      <span slot="footer">
        <el-button @click="EditdialogVisible = false" >取 消</el-button>
        <el-button type="primary" @click="editSinger" >确 定</el-button>
      </span>
    </el-dialog>

<!--    删除对话框-->
    <el-dialog title="提示" :visible.sync="DeleteVisible" width="30%" >
      <div align="center">
        <span>是否确定删除</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="DeleteVisible = false">取 消</el-button>
        <el-button size="mini" type="danger" @click="DelteSingerRow">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {delteSinger, getAllSinger, setSinger, updateSigner} from "../api";
import {mixin} from "../mixinx";

export default {
  name: "Singer",
  mixins: [mixin],
  data() {
    return {
      AdddialogVisible: false,
      EditdialogVisible:false,
      DeleteVisible:false ,
      AddSingerfRuleForm: {
        name: '',
        sex:'',
        birth:'',
        location:'',
        introduction:''
      },
      EditSingerRuleForm:{
        id:'',
        name: '',
        sex:'',
        birth:'',
        location:'',
        introduction:''
      },
      AddSingerRules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
      },
      EditingerRules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
      },
      SingerTableDate:[],
      tempDate:[],
      selectSinger:'',
      pageSize:5,         //当前分页大小
      currentPage:1,      //当前页面
      idx:-1,       //当前选择项id
      multipleSelection:[],  //表格的多选项
    }
  },
  watch:{
    // 监听搜索歌手信息框，随输入文字变化
    selectSinger: function(){
      if(this.selectSinger == ''){
        this.SingerTableDate = this.tempDate;
      }else{
        this.SingerTableDate = [];
        for(let item of this.tempDate){
          if(item.name.includes(this.selectSinger)){
            this.SingerTableDate.push(item);
          }
        }
      }
    }
  },
  computed:{
     // 计算当前歌手表里的所有歌手数据
      allSingerTableDate(){
          return this.SingerTableDate.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
      }
  },
  created() {
    this.getSingerDate()
  },

  methods: {
      // 查询所有歌手
      getSingerDate(){
        this.tempDate=[]
        this.SingerTableDate=[]
        getAllSinger().then(res=>{
          this.tempDate=res
          this.SingerTableDate=res
          this.currentPage=1
        })
      },
      // 添加歌手事件
      addSinger(){
        let d=this.AddSingerfRuleForm.birth
        let datetime=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()
        let params=new URLSearchParams()
        params.append('name',this.AddSingerfRuleForm.name)
        params.append('sex',this.AddSingerfRuleForm.sex)
        params.append('birth',datetime)
        params.append('pic','/img/singerPic/hhh.jpg')
        params.append('location',this.AddSingerfRuleForm.location)
        params.append('introduction',this.AddSingerfRuleForm.introduction)
        setSinger(params).then(res =>{
          console.log(res)
          if(res.code==1){
            this.getSingerDate()
            this.$message({
              showClose: true,
              message: '添加成功',
              type: 'success'
            });
          }else {
            this.$message({
              showClose: true,
              message: '添加失败',
              type: 'error'
            });
          }
        }).catch(err =>{
          console.log(err)
        })
        this.AdddialogVisible=false

      },
    // 把当前要修改的歌手信息id传入修改对话框
    handleEdit(row){
      this.EditdialogVisible=true
      this.EditSingerRuleForm={
        id:row.id,
        name:row.name,
        sex:row.sex,
        birth:row.birth,
        location:row.location,
        introduction:row.introduction
      }
    },
    // 修改歌手信息
    editSinger(){
      let d=new Date(this.EditSingerRuleForm.birth)
      let datetime=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()
      let params=new URLSearchParams()
      params.append('id',this.EditSingerRuleForm.id)
      params.append('name',this.EditSingerRuleForm.name)
      params.append('sex',this.EditSingerRuleForm.sex)
      params.append('birth',datetime)
      params.append('location',this.EditSingerRuleForm.location)
      params.append('introduction',this.EditSingerRuleForm.introduction)
      updateSigner(params).then(res =>{
        console.log(res)
        if(res.code==1){
          this.getSingerDate()
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          });
        }else {
          this.$message({
            showClose: true,
            message: '修改失败',
            type: 'error'
          });
        }
      }).catch(err =>{
        console.log(err)
      })
      this.EditdialogVisible=false
    },
    // 确定删除歌手
    DelteSingerRow(){
      delteSinger(this.idx).then(res =>{
          if(res){
            this.getSingerDate()
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'success'
            });
          }else {
            this.$message({
              showClose: true,
              message: '删除失败',
              type: 'error'
            });
          }
    })
      this.DeleteVisible=false
    },
    // 更新图片
    uploadUrl(id){
       return `${this.$store.state.HOST}/singer/updateSingerPic?id=${id}`
    },
    // 获取当前页
    handleCurrentChange(val){
       this.currentPage=val
    },
    // 当前页的显示大小
    handleSizeChange(val){
        this.pageSize=val
    },
    // 转向歌曲管理页面
    editSong(id,name){
      this.$router.push({path:`/SingerSong`,query:{id,name}})
    }
  }
}
</script>

<style scoped>
.handle-box{
  margin-bottom: 20px;
}
.singer-img{
  width: 100%;
  height: 80px;
  border-radius: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}
.handle-input{
  width: 300px;
  display: inline-block;
}
.PageNation{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>



























